<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="zhangfn" uri="http://github.com/zhangkaitao/tags/zhang-functions" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style2.css" type="text/css" media="all" />
     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/demo.css" type="text/css" media="all" />
     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/jquery-ui.css" >
     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/jquery-ui-timepicker-addon.css" >
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-ui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-ui-timepicker-addon.js"></script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ckform.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/showdate.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/laydate/laydate.js"></script>
   	<script src="${pageContext.request.contextPath}/static/js/zoom.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/Validform_v4.0_min.js"></script>
	<style type="text/css">
		#fl{display:none}
		td{width:185px;height:35px;border:1px solid #bbb;line-height:35px}
		.btn{font-family:"微软雅黑";}
		#table1{min-height:150px;overflow-y:auto;max-height:250px;}
	</style>
</head>
<body class="main" class="wraper">
<form:form method="post" commandName="ban" class="registerform"  onsubmit="return dosubmit()" enctype="multipart/form-data">
	<form:hidden path="id" />
		<table class="table table-bordered table-hover definewidth m10" style="margin-left:3%;margin-top:2%;">		
	 	<tr> 		
        	<td width="10%" class="tableleft" >*用户编号 </td>
        	<td>
        		<input type="radio" value="0" name="userCode_ck">手输
        		<input type="radio" value="1" name="userCode_ck" checked="checked">男
        		<input type="radio" value="2" name="userCode_ck">女
        		<form:input path="userCode" style="height: 41px; width: 300px; display: none"/>
        	</td>
      		<td><div class="Validform_checktip"></div></td>
    	</tr>
    	<tr> 		
        	<td width="10%" class="tableleft" >*广播内容 </td>
        	<td>
        		 <form:textarea style="resize:none; width:100%;border:0;" rows="30" cols="60" path="broadcastContent"/>
        	</td>
      		<td><div class="Validform_checktip"></div></td>
    	</tr>
    	<tr> 		
        	<td width="10%" class="tableleft" >*点赞数 </td>
        	<td><form:input path="fabulousCount" style="height: 41px; width: 300px;border:0;"/></td>
      		<td><div class="Validform_checktip"></div></td>
    	</tr>
    	<tr> 		
        	<td width="10%" class="tableleft" >*阅读量</td>
        	<td><form:input path="readCnt" style="height: 41px; width: 300px;border:0;"/></td>
      		<td><div class="Validform_checktip"></div></td>
    	</tr>
    	<tr>
    		
        	<td class="tableleft">*上传活动图片</td>
        	<td> 
        		<div style=" width:990px;">
					<input type="file"  name="files" id="doc" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />
					<div id="dd" style=" width:990px;"></div>
					<br>
				</div>
			</td>                   
    	</tr>
<!--     	<tr> 		 -->
<!--         	<td width="10%" class="tableleft" >图片地址 </td> -->
<%--         	<td><form:input path="broadcastImg" style="height: 41px; width: 300px"/></td> --%>
<!--       		<td><div class="Validform_checktip"></div></td> -->
<!--     	</tr> -->
    	<tr> 		
        	<td width="10%" class="tableleft" >视频地址 </td>
        	<td><form:input path="broadcastVideo" style="height: 41px; width: 300px;border:0;"/></td>
      		<td><div class="Validform_checktip"></div></td>
    	</tr>
    	<tr>
        	<td width="10%" class="tableleft" >*发布时间</td>
       		<td><input class="datepicker" type="text" name="releaseTime" style="border:0;" ></td>
    	</tr>
    	<tr>
    		<td class="tableleft">*广播类型</td>
        	<td> 
        		<div style="margin:0 auto;">
        			 <form:select path="type">
        			 <form:option value="1">图片</form:option>                   
                   	<form:option value="0">文本</form:option>  	  
                   	<form:option value="2">视频</form:option>  
                 	</form:select>  	            
             	</div> 
        	</td>
        </tr>
    	<tr>
        	<td width="10%" class="tableleft" >*发布状态</td>
       		<td>
       			<div style="margin:0 auto;">
        			<form:select path="state"> 
        				<form:option value="3">预发布</form:option>                  
	                   	<form:option value="0">正常</form:option>  
	                   	<form:option value="1">禁用</form:option>  
	                   	<form:option value="2">删除</form:option>    
                 	</form:select>  	            
             	</div> 
       		</td>
    	</tr>
    	<tr>
        	<td class="tableleft">
        		评论
        	</td>
        	
        	<td>
        		<dd>
        			<table class="table table-bordered table-hover definewidth m10" style="margin-bottom:0" id="table1">		
					 	<tr> 		
				        	<td>
				        		<select id="userCode_ck1" style="border:0;height:99px">
				        			<option value="0">手输</option>
				        			<option value="1" selected="selected">男</option>
				        			<option value="2">女</option>
				        		</select>
				        	</td>
				        	<td>
				        		<input type="text" id="userCode1" name="userCode1" style="height: 99px;border:0;" readonly="readonly"/>
				        	</td>
				        	<td>
				        		<input type="text" id="count" name="count" style="height: 99px;border:0;"/>
				        	</td>
				      		<td>
				      			<textarea class="commentContent" style="resize:none;border:0;height:99px" rows="45" cols="60" name="commentContent"></textarea>
				      		</td>
				      		<td>
				      			<input class="datepicker" style="border:0;height: 99px;" name="commentTime" type="text" >
				      		</td>
				      		<td>
				      			<input type="button" id="addTable" value="确认" style="font-weight:bold;font-size:30px;border:0;margin-top:25px;margin-left:40px;background:#fff"/> 
				      		</td>
				    	</tr>
		        		<div id="fl">
		        			<tr> 	
					        	<td>
					        		用户类型
					        	</td>
					        	<td>
					        		用户编号
					        	</td>
					        	<td>
					        		点赞数
					        	</td>
					      		<td>
					      			评论内容
					      		</td>
					      		<td>
					      			评论时间
					      		</td>
					      		<td>
					      			操作
					      		</td>
					    	</tr>
		        		</div>
	        		</table>
        			
        			
        		</dd>
           		<%-- <form:button >${op}</form:button>   --%>           
       		</td>
    	</tr>
	</table>
	<input type="submit" value="${op}" id="submit">
</form:form>
</body>
<script type="text/javascript">
$(".btn").click(function(){
	$("#fl").css("display","block");
})
$("#addTable").click(function(){
	var ck = $("#userCode_ck1").val();
	var ck_text = $("#userCode_ck1").find("option:selected").text();;
	var code = $("input[name='userCode1']").val();
	var count = $("input[name='count']").val();
	var contents = $(".commentContent").val();
	var time = $("input[name='commentTime']").val();
    var tr="<tr><td>"+ck_text+"<input type='hidden' name='userCode_ck1' value = '" + ck + "'/></td>"
    		+ "<td>"+code+"<input type='hidden' name='sponsorCode' value = '" + code + "'></td>"
    		+ "<td>"+count+"<input type='hidden' name='r_fabulousCount' value = '" + count + "'></td>"
    		+ "<td>"+contents+"<input type='hidden' name='commentContent' value = '" + contents + "'></td>"
    		+ "<td>"+time+"<input type='hidden' name='commentTime' value = '" + time + "'></td><td><a onclick=delete1(this) style='color:red;cursor:pointer'>"+"删除"+"</a></td></tr>";
    $("#table1").append(tr);
});

function delete1(obj){
	$(obj).parent().parent().remove();
}

/* $('#myform').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});
$("form").submit(function() {
	  $("#buttonid").attr("disabled", "disabled");
	});	 */
var isCommitted = false;//表单是否已经提交标识，默认为false
        function dosubmit(){
           if(isCommitted==false){
                 isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
                return true;//返回true让表单正常提交
            }else{
                return false;//返回false那么表单将不提交
            }
        }
$(function(){
	$('.datepicker').datetimepicker({
		showSecond:true,
        timeFormat: "HH:mm:ss",
        dateFormat: "yy-mm-dd"
    });

	
	
	//$(".registerform").Validform();  //就这一行代码！;
	
	$(".registerform").Validform({
		tiptype:1
	});
	
	$("input[name='userCode_ck']").change(function() {
		//  datatype="*"  nullmsg="用户编号不能为空！"
		if($("input[name='userCode_ck']:checked").val() == '0') {
			$("#userCode").css("display", "block");
			$("input[name='userCode']").attr("datatype", "*");
			$("input[name='userCode']").attr("nullmsg", "用户编号不能为空！");
		} else {
			$("#userCode").css("display", "none");
			$("input[name='userCode']").removeAttr("datatype");
			$("input[name='userCode']").removeAttr("nullmsg");
		}
	}); 
	$("#userCode_ck1").change(function() {
		//  datatype="*"  nullmsg="用户编号不能为空！"
		if($("#userCode_ck1").val() == '0') {
			$("#userCode1").removeAttr("readonly");
		} else {
			$("#userCode1").attr("readonly", "readonly");
		}
	}); 
})

	//下面用于多图片上传预览功能
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("doc");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";

        var fileList = docObj.files;

        if(fileList.length > 9) {
        	alert("最多允许上传九张图片");
        	docObj.value = "";
        	return false;
        }
        
        for (var i = 0; i < fileList.length; i++) {            
            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
            var imgObjPreview = document.getElementById("img"+i); 
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '150px';
                imgObjPreview.style.height = '180px';

                //imgObjPreview.src = docObj.files[0].getAsDataURL();

                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            } else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);

                //必须设置初始大小
                localImagId.style.width = "150px";
                localImagId.style.height = "180px";

                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }  
        return true;
    }

</script>
</html>
<script>
function jump(){
 window.location.href="placardQuery.html";
}
</script>